<template>
  <div id="InterfaceDictDiv">
    <div class="bodyContent">
      <Splitpanes>
        <!-- 左侧表格  -->
        <Pane size="90">
          <div class="tableBody">
            <vxe-table  ref="InterfaceDictTableRef" :span-method="mergeRowMethod" @current-change="detailRowClick" border height="auto" :data="detailInfoList" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" resizable show-overflow keep-source>
              <vxe-column field="roleName" title="角色名称" width="200px"></vxe-column>
              <vxe-column field="itemName" title="项目名称" width="200px"></vxe-column>
              <vxe-column field="taskName" title="任务名称" ></vxe-column>
            </vxe-table>
          </div>
        </Pane>
        <!-- 右侧表单 -->
        <Pane size="60">
        </Pane>
      </Splitpanes>

    </div>
  </div>
</template>
<script setup lang="ts">
// 引入组件区 ==========
import { ref, reactive, getCurrentInstance, onMounted, defineProps, watch } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
import {VxeMessage, VxeNotifyType} from "@/utils/CommonMessage";
import {isEmpty} from "lodash";
import {VXETable} from "vxe-table";
let { proxy }: any = getCurrentInstance();

let disabledTag = ref(false);
let showDialog = ref(false); //添加弹框展示状态
let type = ref('');

let detailInfoList: any = reactive([]);
let detailsForm = reactive({
  id: null,
  detatilStatus: '',
  roleName: '',
  itemName: '',
  taskName: '',
  taskId: ''
});
let rateform = reactive({
  id: null,
  orgId: '',
  processCode: '',
  processName: '',
  versionCode: '',
  versionName: '',
  gradeCode: '',
  gradeName: '',
  status: ''
});

defineExpose({ initPage });

function initPage(row: any) {
  Object.assign(rateform, row);
  type.value = row.type;
  getDetailList(row);
}
//获取明细table
function getDetailList (data: any) {
  detailInfoList.length = 0;
  const url = '/emr/processDetail/findEmrProcessDetailListByUser?processCode='+data.processCode;
  proxy.$http
      .get(url)
      .then((res: any) => {
        detailInfoList.push(...res.data);
        detailRowClick({ row: detailInfoList[0] }); //默认选中第一条数据
      })
      .catch((err: any) => {
        proxy.$alert(err, '提示');
      });
}
//合并单元格
function mergeRowMethod({ row, _rowIndex, column, visibleData }) {
  const fields = ['roleName','itemName']
  const cellValue = row[column.field]
  if (cellValue && fields.includes(column.field)) {
    const prevRow = visibleData[_rowIndex - 1]
    let nextRow = visibleData[_rowIndex + 1]
    if (prevRow && prevRow[column.field] === cellValue) {
      return { rowspan: 0, colspan: 0 }
    } else {
      let countRowspan = 1
      while (nextRow && nextRow[column.field] === cellValue) {
        nextRow = visibleData[++countRowspan + _rowIndex]
      }
      if (countRowspan > 1) {
        return { rowspan: countRowspan, colspan: 1 }
      }
    }
  }
}
// 点击字段当前行触发的事件
function detailRowClick({ row }: any) {
  if (isEmpty(row)) {

    Object.assign(detailsForm, {});
  } else {
    Object.assign(detailsForm, row);
    (proxy.$refs.InterfaceDictTableRef as any).setCurrentRow(row);


  }
}
</script>

<style lang="scss" scoped>
#InterfaceDictDiv {
  height: 100%;

  .bodyContent {
    height: calc(100%);

    .splitpanes {
      background-color: $base-white;

      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }

      .right-Btn {
        margin: 0 0 0 5px;
        width: 40px;
      }

      // 右侧保存按钮
      .saveBtn {
        float: right;
        margin: 5px 10px;
      }

      .tableBody {
        height: calc(100% - 40px);
      }

      // 中间
      .tableBox {
        width: 100%;
        height: calc(100% - 40px);
      }

    }
  }
}
</style>
